<template>
	<view class="content">
		<view class="topBox">
			<h3>WELCOME</h3>
			<h3>欢迎使用飞鸢免费小说应用</h3>
		</view>
		<view class="inputBox">
			<view class="ipt">
				<h4>手机号</h4>
				<input type="number" v-model="loginForm.phone" placeholder="请输入手机号码" />
			</view>
			<view class="ipt">
				<h4>验证码</h4>
				<view class="yzmBox">
					<input type="number" v-model="loginForm.code" placeholder="请输入验证码" />
					<view class="yzm" @click="sendCode" v-show="code1Show">
					    发送验证码
					</view>
					<view class="yzm" v-show="code2Show">
					    {{ codeNum }}S后重新获取
					</view>
					<view class="yzm" @click="sendCode" v-show="code3Show">
					    重新获取
					</view>
				</view>
			</view>
			
			<button class="loginBtn" @click="loginBtn">登录</button>
			<!-- <button class="registerBtn">注册</button> -->

			<view class="tipbox">
				<view class="txt">
					—— 其他账号登录 ——
				</view>
				<view class="otherUser">
					<uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
					<uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/config/base.js'
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					code: ''
				},
				codeNum: 60,
				code1Show: true,
				code2Show: false,
				code3Show: false,
				deviceInfo: {}
			}
		},
		onLoad() {
			// 获取设备基础信息
			this.getInitPage()
		},
		methods: {
			getInitPage() {
				// {
				//     "brand": "huawei",
				//     "deviceBrand": "huawei",
				//     "deviceModel": "BRQ-AN00",
				//     "devicePixelRatio": 2.981250047683716,
				//     "deviceId": "4DDB1CFB1F60EC23A90D1736D862BF94",
				//     "deviceOrientation": "portrait",
				//     "deviceType": "phone",
				//     "model": "BRQ-AN00",
				//     "platform": "android",
				//     "system": "Android 12"
				// }
				const deviceInfo = uni.getDeviceInfo()
				this.deviceInfo = deviceInfo
			},
			// 发送验证码
			sendCode() {
				// 验证手机号是否输入正确
				let isPhone = this.validatePhoneNumber()
				if (!isPhone) {
					return;
				}
				uni.showLoading({
					title: '发送中,请耐心等待一下!',
					mask: true
				})
				// 先调用后台发送验证码，然后改变秒数即可
				uni.request({
					url: baseUrl.url + '/app/sendCode',
					timeout: 100000,
					method: 'POST',
					data: {
						mobile: this.loginForm.phone
					},
					success: (res) => {
						const data = JSON.stringify(res)
						const obj = JSON.parse(data)
						if (res && obj.data.code === 0) {
							if (!obj.data.isSuccess) {
								uni.showToast({
									title: obj.data.msg,
									icon: 'none',
									duration: 2000
								})
								return;
							}
							this.changeCodeNum()
						}
						uni.hideLoading()
					},
					fail: (error) => {
						uni.hideLoading()
						console.log("fail:" + error)
					}
				})
				
			},
			// 改变验证码的倒计时
			changeCodeNum() {
				this.code1Show = false
				this.code2Show = true
				this.code3Show = false
				let num = setInterval(() => {
					this.codeNum --
					
					if (this.codeNum <= 0) {
						clearInterval(num)
						this.codeNum = 60
						this.code1Show = false
						this.code2Show = false
						this.code3Show = true
						return
					}
				}, 1000)
			},
			// 登录
			loginBtn() {
				let isPhone = this.validatePhoneNumber()
				if (!isPhone) {
					return;
				}
				uni.showLoading({
					title: '登录中,请耐心等待一下!',
					mask: true
				})
				if (!this.loginForm.code) {
					uni.showToast({
						title: '验证码不能为空!',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				this.deviceInfo.mobile = this.loginForm.phone
				this.deviceInfo.code = this.loginForm.code
				uni.request({
					url: baseUrl.url + '/app/login',
					timeout: 100000,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: this.deviceInfo,
					success: (res) => {
						if (res && res.data.code === 0) {
							const data = res.data
							if (data) {
								uni.showToast({
									title: '登录成功!',
									icon: 'none',
									duration: 2000
								})
								uni.setStorageSync('phone', this.loginForm.phone);
								uni.setStorageSync('token', data.token);
								const loginReturnPage = uni.getStorageSync('login_return_page');
								if (!loginReturnPage) {
									// 登录成功跳转到我的页面
									uni.switchTab({
										url: '/pages/my/index'
									});
								} else {
									uni.navigateBack();
									uni.removeStorageSync('login_return_page');
								}
								return
							} else {
								uni.showToast({
									title: '登录失败',
									icon: 'none',
									duration: 2000
								})
								return
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							})
						}
						uni.hideLoading()
					},
					fail: (error) => {
						console.log("fail:" + error)
						uni.hideLoading()
					}
				})
			},
			// 验证手机号
			validatePhoneNumber() {
				if (!this.loginForm.phone) {
					// 手机号不能为空
					uni.showToast({
						title: '手机号不能为空!',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				const regex = /^1[3-9]\d{9}$/;
				if (!regex.test(this.loginForm.phone)) {
					// 手机号输入不正确
					uni.showToast({
						title: '手机号输入不正确!',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				return true;
			}
		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
		background-color: aquamarine;
		background: url("https://www.galaxyclub.cn/Upload/IMAGES/15/0615/38af439784544e95b7c64cad64a14157_650x650.jpg") no-repeat;
		background-size: cover;
	}

	.topBox {
		font-size: 34rpx;
		color: #fff;
		padding: 80rpx 50rpx;
	}

	h3 {
		margin-bottom: 10rpx;
	}

	.inputBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 85vh;
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 60rpx;
		box-sizing: border-box;
	}

	.ipt {
		margin-bottom: 50rpx;
	}

	.ipt h4 {
		margin-bottom: 20rpx;
		font-size: 36rpx;
		color: #333;
	}

	.ipt input {
		border-bottom: 1px solid #dedede;
		padding-bottom: 20rpx;
		font-size: 28rpx;
	}

	.loginBtn {
		margin-top: 20rpx;
		line-height: 85rpx;
		text-align: center;
		background: linear-gradient(to right, rgb(86, 104, 214), rgb(86, 104, 214));
		border-radius: 40rpx;
		color: #fff;
		margin-top: 50rpx;
	}

	.registerBtn {
		margin-top: 20rpx;
		line-height: 85rpx;
		text-align: center;
		border-radius: 40rpx;
		color: rgb(86, 104, 214);
		margin-top: 50rpx;
		border: none;
	}

	.tipbox {
		position: fixed;
		bottom: 120rpx;
		left: 50%;
		transform: translate(-50%, -120px);
	}

	.otherUser {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}

	.txt {
		font-size: 28rpx;
		color: #969696;
	}

	.otherUser .uni-icons {
		margin-left: 20rpx;
	}
	
	.yzmBox {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	
	.yzmBox input {
		border-bottom: 1px solid #dedede;
		padding-bottom: 20rpx;
		font-size: 28rpx;
	}
	
	.yzm {
	    font-size: 28rpx;
	    padding: 5rpx 8rpx;
	}
</style>